<template>
  <div class="app-container">
    <div v-show="active === 1">
      <div class="searchform">
        <!-- 查询条件 -->
        <el-form ref="searchForm" :model="search" size="mini" label-width="90px">
          <el-row :gutter="6">
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="dealerCode" label="经销商代码">
                <el-input v-model="search.dealerCode" placeholder="经销商代码" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="dealerName" label="经销商名称">
                <el-input v-model="search.dealerName" placeholder="经销商名称" clearable />
              </el-form-item>
            </el-col>
            <div style="text-align:right">
              <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
              </el-button>
              <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
              </el-button>
            </div>
          </el-row>
        </el-form>
      </div>
      <!-- 表单表头信息 -->
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">虚拟经销商维护</div>
          <!-- <el-button-group>
            <el-button type="primary" icon="el-icon-plus" @click="addClause()">新增</el-button>
          </el-button-group> -->
        </div>
        <BaseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
          <el-table-column type="index" label="序号" min-width="50"/>
          <el-table-column align="center" label="操作" min-width="100">
            <template slot-scope="scope">
              <el-tooltip class="item" content="编辑" placement="bottom">
                <el-button
                  type="text"
                  style="font-size: 20px;"
                  icon="el-icon-edit-outline"
                  @click="editDealer(scope.row)"/>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column v-if="false" prop="dealer_id" label="dealer_id"/>
          <el-table-column v-if="false" prop="dealer_short_name" label="经销商简称"/>
          <el-table-column v-if="false" prop="address" label="地址"/>
          <el-table-column v-if="false" prop="link_man" label="联系人"/>
          <el-table-column v-if="false" prop="phone" label="联系电话"/>
          <el-table-column prop="dealer_code" label="经销商代码"/>
          <el-table-column prop="dealer_name" label="经销商名称"/>
          <el-table-column prop="longitude" label="经度"/>
          <el-table-column prop="latitude" label="纬度"/>

        </BaseTable>
      </div>
    </div>
    <!-- 新增div -->
    <!-- 弹框 -->
    <el-dialog v-dialogDrag v-if="dialogFormVisible" :title="earnestTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="60%">
      <div class="elform">
        <el-form ref="form" :model="form" :rules="rules" label-width="95px">
          <el-row :gutter="6">
            <el-col :xs="24" :sm="8" :md="12">
              <el-form-item prop="dealerCode" label="经销商代码" >
                <el-input v-model="form.dealerCode" placeholder="请输入经销商代码" clearable disabled/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="12">
              <el-form-item prop="dealerShortName" label="经销商简称" >
                <el-input v-model="form.dealerShortName" placeholder="请输入简称" clearable />
              </el-form-item>
            </el-col>

          </el-row>
          <el-row :gutter="6">
            <el-col v-if="false" :xs="24" :sm="8" :md="12">
              <el-form-item prop="dealerId" label="dealerId" >
                <el-input v-model="form.dealerId" placeholder="请输入经销商代码" clearable />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="8" :md="12">
              <el-form-item prop="dealerName" label="经销商名称" >
                <el-input v-model="form.dealerName" placeholder="请输入经销商名称" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="12">
              <el-form-item prop="address" label="地址" >
                <el-input v-model="form.address" placeholder="请输入地址" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="6">
            <el-col :xs="24" :sm="8" :md="12">
              <el-form-item prop="longitude" label="经度" >
                <el-input v-model="form.longitude" placeholder="请输入经度" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="12">
              <el-form-item prop="latitude" label="纬度" >
                <el-input v-model="form.latitude" placeholder="请输入纬度" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="6">
            <el-col :xs="24" :sm="8" :md="12">
              <el-form-item prop="linkMan" label="联系人" >
                <el-input v-model="form.linkMan" placeholder="请输入联系人" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="12">
              <el-form-item prop="phone" label="联系电话" >
                <el-input v-model="form.phone" placeholder="请输入联系电话" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="text">
          <i class="el-icon-search magnifier" />
        </el-button>
        <el-button v-show="saveBS" type="primary" @click="saveClause">保 存</el-button>
        <el-button @click="cancel()">取 消</el-button>
      </div>

    </el-dialog>
    <!-- //
    // -->
  </div>
</template>

<script>
import { selectDealer, editDealer } from '@/api/admin/org/gms/virtualDealer'
import Pagination from '@/components/Pagination'
import BaseTable from '@/components/BaseTable'
import BaseTableNoPage from '@/components/BaseTable/BaseTableNoPage'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
import filtercode from '@/components/Checkbox/filtercode'
import _ from 'lodash'
export default {
  name: 'Payment',
  components: {
    BaseTable,
    BaseTableNoPage,
    Pagination,
    rSelect,
    filtercode
  },
  mixins: [formMixins],
  data() {
    return {
      active: 1,
      dialogFormVisible: false,
      earnestTitle: '',
      dialogType: '',
      saveBS: '',
      type: 0,
      search: {
        limit: 10,
        pageNum: 1,
        dealerCode: '',
        dealerName: ''

      },

      dialogVisible: false,
      rules: {
        dealerCode: [{
          required: true,
          message: '请输入经销商代码',
          trigger: 'blur'
        }],
        dealerName: [{
          required: true,
          message: '请输入经销商名称',
          trigger: 'blur'
        }],
        longitude: [{
          required: true,
          message: '请输入经度',
          trigger: 'blur'
        }],
        latitude: [{
          required: true,
          message: '请输入纬度',
          trigger: 'blur'
        }],
        dealerShortName: [{
          required: true,
          message: '请输入简称',
          trigger: 'blur'
        }],
        address: [{
          required: true,
          message: '请输入地址',
          trigger: 'blur'
        }],
        linkMan: [{
          required: true,
          message: '请输入联系人',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          message: '请输入联系电话',
          trigger: 'blur'
        }]
      },
      form: {
        dealerId: '',
        dealerCode: '',
        dealerName: '',
        longitude: '',
        latitude: '',
        dealerShortName: '',
        address: '',
        linkMan: '',
        phone: ''
      }
    }
  },
  computed: {},
  watch: {
  },
  mounted() {
    this.searchHandle()
  },
  methods: {
    // 查询数据
    searchHandle() {
      const table = this.$refs['table']
      const search = _.extend(this.search)
      table.wait()
      selectDealer(search).then(res => {
        table.complete().filData(res)
      }).catch(err => {
        table.complete()
      })
    },
    // 编辑
    async editDealer(data) {
      this.saveBS = true
      this.dialogType = 'edit'
      this.earnestTitle = '虚拟经销商编辑'
      this.form.dealerShortName = data.dealer_short_name
      this.form.address = data.address
      this.form.dealerId = data.dealer_id
      this.form.dealerCode = data.dealer_code
      this.form.dealerName = data.dealer_name
      this.form.longitude = data.longitude
      this.form.latitude = data.latitude
      this.form.linkMan = data.link_man
      this.form.phone = data.phone
      this.dialogFormVisible = true
    },
    saveClause() {
      this.form.payMethod = this.checkList
      this.$refs['form'].validate(valid => {
        if (valid) {
          // const params = {
          //   dealerId: this.form.dealerId,
          //   dealerCode: this.form.dealerCode,
          //   dealerName: this.form.dealerName,
          //   longitude: this.form.longitude,
          //   latitude: this.form.latitude
          // }
          if (this.dialogType === 'edit') {
            editDealer(this.form, this.form.EMP_ID).then(res => {
              this.$message({
                type: 'success',
                message: '虚拟经销商编辑成功!'
              })
              this.cancel()
              this.dialogFormVisible = false
              this.searchHandle()
            }).catch(err => {
            })
          }
        }
      })
    },
    // 取消弹窗
    cancel() {
      this.dialogFormVisible = false
    }

  }
}

</script>

<style scoped>
.content{
  overflow-y: auto
}
.sele{
 width: 230px;
}
</style>
